<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.0</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" th:href="@{/css/font.css}">
    <link rel="stylesheet" th:href="@{/css/xadmin.css}">
    <script th:src="@{/webjars/jquery/3.5.1/jquery.min.js}"></script>
    <script th:src="@{/webjars/jquery/3.5.1/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/lib/layui/layui.js}" charset="utf-8"></script>
    <script type="text/javascript" th:src="@{/js/xadmin.js}"></script>
</head>

<body>
<div class="x-body">
    <form class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">
                <span class="x-red">*</span>用户名
            </label>
            <div class="layui-input-inline">
                <input type="text" id="username" name="username"  lay-verify="required" readonly="readonly" th:value="${USER_EDIT.getUsername()}"
                       autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">
                用户名不能改变
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">
                <span class="x-red">*</span>姓名
            </label>
            <div class="layui-input-inline">
                <input type="text" id="name" name="name" lay-verify="password" th:value="${USER_EDIT.getName()}"
                       autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">
                显示的姓名
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">
                <span class="x-red">*</span>邮箱
            </label>
            <div class="layui-input-inline">
                <input type="text" id="email" name="email" lay-verify="required" th:value="${USER_EDIT.getEmail()}"
                       autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">
               邮箱要符合邮箱规范
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">
                <span class="x-red">*</span>电话
            </label>
            <div class="layui-input-inline">
                <input type="text" id="phone" name="phone" lay-verify="required" th:value="${USER_EDIT.getPhone()}"
                       autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">
                留个电话吧
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">
                <span class="x-red">*</span>地址
            </label>
            <div class="layui-input-inline">
                <input type="text" id="address" name="address" lay-verify="required" th:value="${USER_EDIT.getAddress()}"
                       autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">
                你在哪里呢
            </div>
        </div>

        <div class="layui-form-item">
            <label  class="layui-form-label">
                <span class="x-red">*</span>积分
            </label>
            <div class="layui-input-inline">
                <input type="text" id="points" name="points" lay-verify="required" th:value="${USER_EDIT.getPoints()}" readonly="readonly"
                       autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">
                积分值不可手动更改
            </div>
        </div>

        <div class="layui-form-item">
            <label  class="layui-form-label">
                <span class="x-red">*</span>QQ
            </label>
            <div class="layui-input-inline">
                <input type="text" id="qq" name="qq" lay-verify="required" th:value="${USER_EDIT.getQq()}"
                       autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">
                QQ一般都是9-10位数字
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">
            </label>
            <button class="layui-btn" lay-filter="add" lay-submit id="submitEdit">
                提交
            </button>
        </div>
    </form>
</div>
<script>

    layui.use(['form', 'layer'], function () {
        $ = layui.jquery;
        var form = layui.form
            , layer = layui.layer;

        //自定义验证规则
        // form.verify({
        //     nikename: function (value) {
        //         if (value.length < 5) {
        //             return '昵称至少得5个字符啊';
        //         }
        //     }
        //     , pass: [/(.+){6,12}$/, '密码必须6到12位']
        //     , repass: function (value) {
        //         if ($('#L_pass').val() != $('#L_repass').val()) {
        //             return '两次密码不一致';
        //         }
        //     }
        // 监听提交
        form.on('submit(add)', function (data) {
            // console.log(data);
            let username = $("#username").val();
            let name = $("#name").val();
            let email = $("#email").val();
            let phone = $("#phone").val();
            let address = $("#address").val();
            let qq = $("#qq").val();
            let points = $("#points").val();
            // let status = $("#status").val();
            // let wares_mark = $("#wares_mark").val();
            // 发异步，把数据提交给后台
            $.ajax({
                url: "editUser",
                type: "PUT",
                data:{
                    username:username,
                    name:name,
                    email:email,
                    phone: phone,
                    address: address,
                    qq: qq,
                    points: points,
                    // waresStatus: status,
                    // mark: wares_mark
                },
                success: function (resultInfo) {
                    // console.log(resultInfo);
                    layer.alert(resultInfo.message, {icon: 6}, function () {
                        // 获得frame索引
                        var index = parent.layer.getFrameIndex(window.name);
                        //关闭当前frame
                        parent.layer.close(index);
                    });
                },error:function (e) {
                    // console.log("这里出现了问题！");
                    // console.log(e);
                }

            });
            return false;
        })

    });

</script>
</body>

</html>